<template>
  <el-descriptions :column="2" border class="studentInfoDescription" title="学生信息">
    <template #extra>
      <el-button v-show="!modify" type="primary" @click="modify = true">修改信息</el-button>
      <el-button v-show="!modify" type="primary" @click="updatePasswordDialog = true">修改密码</el-button>
      <el-button v-show="modify" :disabled="!modify" type="success" @click="save">保存</el-button>
      <el-button v-show="modify" type="info" @click="modify = false">取消</el-button>
    </template>
    <el-descriptions-item label="学号">
      <span v-show="!modify">{{ editableStudent.studentId }}</span>
      <el-input v-show="modify" v-model="student.studentId" class="input" disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="姓名">
      <span v-show="!modify">{{ editableStudent.name }}</span>
      <el-input v-show="modify" v-model="student.name" :disabled="!modify" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="地址">
      <span v-show="!modify">{{ editableStudent.address }}</span>
      <el-input v-show="modify" v-model="student.address" :disabled="!modify" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="邮箱">
      <span v-show="!modify">{{ editableStudent.email }}</span>
      <el-input v-show="modify" v-model="student.email" :disabled="!modify" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="电话">
      <span v-show="!modify">{{ editableStudent.phone }}</span>
      <el-input v-show="modify" v-model="student.phone" :disabled="!modify" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="性别">
      <span v-show="!modify">{{ editableStudent.sex == 0 ? '男' : '女' }}</span>
      <el-select v-show="modify" v-model="student.sex" :disabled="!modify" class="input" placeholder="Select"
                 size="large">
        <el-option label="男" value="0"/>
        <el-option label="女" value="1"/>
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item label="出生日期">
            <span v-show="!modify">
                {{
                editableStudent.birthDay instanceof Date ? editableStudent.birthDay.toLocaleDateString() : editableStudent.birthDay.substr(0, 10)
              }}
            </span>
      <div v-show="modify" class="input">
        <el-date-picker
            v-model="student.birthDay"
            :disabled="!modify"
            class="input"
            placeholder="选择日期"
            type="date"
        />
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="学校">
      <span v-show="!modify">{{ editableStudent.school }}</span>
      <el-input v-show="modify" v-model="student.school" :disabled="!modify" class="input"/>
    </el-descriptions-item>
  </el-descriptions>
  <div>
    <el-dialog v-model="updatePasswordDialog">
      <UpdatePassword></UpdatePassword>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import type {ResponseInterface, StudentInterface} from "@/model/type";
import {updateStudentInfoAPI} from "@/api/UserAPI";
import {defineEmits} from "vue/dist/vue";
import UpdatePassword from "@/components/home/UpdatePassword.vue";

const emit = defineEmits(['updateStudent']);

interface Props {
  student: StudentInterface;
}

const props = defineProps<Props>();
// 创建一个本地 ref 存储学生信息副本，用于编辑和保存
const editableStudent = ref<StudentInterface>(props.student);
let modify = ref<boolean>(false);
let updatePasswordDialog = ref<boolean>(false);

async function save() {
  const r: ResponseInterface = await updateStudentInfoAPI(editableStudent.value, localStorage.getItem("token"));
  if (r.code === 200) {
    // 更新成功后，可以将本地状态同步回 prop（但这不是最佳实践）
    // props.student = editableStudent.value; // 不推荐直接修改 prop
    // 更好的做法是通过事件通知父组件更新数据
    emit('updateStudent', editableStudent.value);
    localStorage.setItem("user", JSON.stringify(editableStudent.value))
    modify.value = false;
  }
}
</script>

<style scoped>
.input {
  width: 200px;
}

.studentInfoDescription {
  margin-top: 20px;
}
</style>